---
metaTitle: Kbd
metaDescription: Represents keyboard input or a hotkey.
sourcePath: components/kbd
---

```jsx live=true
<Kbd>Shift + Tab</Kbd>
```

## API Reference

This component is based on the `kbd` element and supports [common margin props](/themes/docs/overview/layout#margin-props).

<ThemesPropsTable defs="kbdPropDefs" />

## Examples

### Size

Use the `size` prop to control text size.

```jsx live=true scroll=true
<Flex direction="column" align="start" gap="3">
	<Kbd size="1">Shift + Tab</Kbd>
	<Kbd size="2">Shift + Tab</Kbd>
	<Kbd size="3">Shift + Tab</Kbd>
	<Kbd size="4">Shift + Tab</Kbd>
	<Kbd size="5">Shift + Tab</Kbd>
	<Kbd size="6">Shift + Tab</Kbd>
	<Kbd size="7">Shift + Tab</Kbd>
	<Kbd size="8">Shift + Tab</Kbd>
	<Kbd size="9">Shift + Tab</Kbd>
</Flex>
```
